<template>
  <view class="safe-area-inset-bottom">
    <!-- 帮助中心头部 -->
    <view class="top-header" style="z-index: 9999;">
      <view class="top-header-bg">
        <h1 class="title">欢迎来到励氪签帮助中心</h1>
        <view class="search">
          <uni-easyinput v-model="searchKeyword" type="text" placeholder="请输入搜索关键字"/>
          <button class="search_btn" size="mini" @click="handleQuery">搜索</button>
        </view>
      </view>
    </view>
    <!-- 帮助文档 -->
    <view>
      <view class="search-total">共找到 <span class="themeColor" style="margin:0 8rpx;">{{ total }} </span>篇相关文档</view>
      <view class="search-content" v-if="!!dataList && dataList.length > 0">
        <view style="padding:15rpx 25rpx;">
          <view class="search-item" v-for="(item,index) in dataList" @click="toDetail(item)">
            <h3 class="title" v-html="item.menuName"></h3>
            <div class="desc" v-html="item.content"></div>
            <div class="source">来源： {{ item.parentMenuName }}</div>
          </view>
        </view>
        <!-- 加载更多 -->
        <uni-load-more color="#00a660" :status="loadStatus"/>
      </view>
      <!-- 暂无数据 -->
      <luanqingEmpty style="margin-top: 240rpx" :show="true" text="没有搜索到相关内容" v-else/>
    </view>
  </view>
</template>

<script>
import {getInfoByKeyword} from "@/api/ec/common/helpContent";
import luanqingEmpty from '@/components/luanqing-empty/luanqing-empty';

export default {
  components: {luanqingEmpty},
  data() {
    return {
      // 加载样式：more-加载前样式，loading-加载中样式，nomore-没有数据样式
      loadStatus: 'loading',
      // 搜索框输入内容
      searchKeyword: '',
      // 总条数
      total: 0,
      // 查询参数
      queryParams: {
        pageNum: 1,
        pageSize: 10,
        params: {
          keyword: ''
        }
      },
      // 数据
      dataList: undefined,
    }
  },
  onLoad(option) {
    this.searchKeyword = option.keyword;
  },
  created() {
    this.handleQuery();
  },
  /** 上拉刷新回调 */
  onReachBottom() {
    if (this.loadStatus != 'noMore' && this.total > this.dataList.length) {
      this.loadStatus = 'loading';
      // 延迟500毫秒显示loading效果
      setTimeout(() => {
        // 执行查询的方法
        this.getList(false);
      }, 500)
    } else {
      // 停止加载
      this.loadStatus = 'noMore'
    }
  },
  methods: {
    /** 搜索 */
    handleQuery() {
      this.getList(true);
    },
    /**
     * 查询数据列表
     * @param reload true 重新加载数据； false 加载更多
     */
    getList(reload) {
      if (reload) {
        this.queryParams.pageNum = 1;
        this.loadStatus = 'more'
        uni.showLoading({title: '加载中...', mask: true});
      }
      this.queryParams.params.keyword = this.searchKeyword;
      getInfoByKeyword(this.queryParams).then(response => {
        if (reload) {
          uni.hideLoading()
        }
        this.total = response.total;
        if (response.total > 0) {
          const dataRows = response.rows;
          this.dataList = reload ? dataRows : this.dataList.concat(dataRows);
        } else {
          this.dataList = [];
        }
        // 判断数据是否加载完全
        if (response.total <= this.dataList.length) {
          this.loadStatus = 'noMore'
        }
        // 页数+1
        this.queryParams.pageNum++
      }).catch(() => {
        if (reload) {
          uni.hideLoading()
        }
      });
    },
    /** 查看详情 */
    toDetail(item) {
      uni.navigateTo({url: './detail?id=' + item.menuId + '&osType=' + item.osType + '&relevanceId=' + item.relevanceId});
    },
  }
}
</script>

<style scoped lang="scss">
page {
  background: $uni-bg-color-grey;
}

.top-header {
  width: 100%;
  height: 240rpx;
  background: url("../../../static/images/help_top_header_bg.png");
  transition: all .4s ease-in-out;
}

.top-header .top-header-bg {
  height: 100%;
  background-repeat: no-repeat;
  background-size: auto 205rpx;
  background-position: top;
}

.top-header .title {
  padding: 44rpx 0 24rpx;
  text-align: center;
  font-size: 36rpx;
  line-height: 50 rrpx;
  font-size: 32rpx;
  font-weight: 550;
  color: #333;
}

.top-header .search {
  width: 636rpx;
  display: -webkit-box;
  display: -webkit-flex;
  display: flex;
  margin: 0 auto;
}

.top-header .search_btn {
  height: 35px;
  margin-left: 5rpx;
  font-size: 14px;
  background-color: $uni-color-primary;
  border-radius: 10rpx;
  color: #fff;
}

.search-total {
  font-size: 24rpx;
  color: #333;
  padding: 10rpx 25rpx;
  background: #f5f5f5;
  border-bottom: 2rpx solid #e9e9e9;
}

.search-content {
  margin: 0 auto 64px;
  overflow: hidden;

  .search-item {
    margin-bottom: 30rpx;
    padding-bottom: 10rpx;
    border-bottom: 2rpx solid #e9e9e9;
  }

  .search-item .title {
    font-size: 30rpx;
    font-weight: 550;
    color: #333;
    line-height: 40rpx;
    margin-bottom: 8rpx;
    cursor: pointer;
  }

  .search-item .desc {
    font-size: 24rpx;
    color: #999;
    line-height: 40rpx;
    margin-bottom: 8rpx;
    vertical-align: middle;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    overflow: hidden;
    -webkit-box-orient: vertical;
    max-height: 100rpx;
  }

  .search-item .source {
    margin: 0px;
    font-size: 20rpx;
    color: #b2b2b2;
    line-height: 28rpx;
  }
}

</style>
